<!--
 * @Descripttion: 
 * @version: 
 * @Author: gonghong
 * @Date: 2023-10-25 
-->
<script>
    import FormModal from './FormModal.vue'
    import HistoryList from './HistoryList.vue'
    import MaintainFormModal from './MaintainFormModal.vue'
    import virtualFormModal from './virtualFormModal.vue'
    import { deleteTableRow } from '@/api/measurDevice'

    export default {
        name: 'Operation',
        props: {
            rowData: {
                type: Object,
                default: () => {
                    return {}
                },
            },
        },
        inject: ['tableRoot'],
        methods: {
            detailClick() {
                new this.$pageModal(
                    HistoryList,
                    {
                        props: {
                            title: '历史数据',
                            rowData: this.$props.rowData,
                        },
                    },
                    (result) => {
                        if (result) {
                            this.tableRoot.onSearchChange()
                        }
                    }
                )
            },

            handleCommand(key) {
                if (key === 'DELETE') {
                    this.onDeleteClick(this.rowData)
                    return
                }
                const components = {
                    EDIT: FormModal,
                    PROPERTY: MaintainFormModal,
                    VIRTUAL: virtualFormModal,
                }
                const titles = {
                    EDIT: '编辑',
                    PROPERTY: '测点名称维护',
                    VIRTUAL: '虚拟计量配置',
                }
                new this.$pageModal(
                    components[key],
                    {
                        props: {
                            title: titles[key],
                            rowData: this.rowData,
                        },
                    },
                    (result) => {
                        if (result) {
                            this.tableRoot.onSearchChange()
                        }
                    }
                )
            },
            onDeleteClick(row) {
                this.$confirm('您确认要删除数据嘛？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    distinguishCancelAndClose: true,
                    type: 'warning',
                }).then(() => {
                    deleteTableRow(row ? row.id : this.rowData.id).then((result) => {
                        if (result.code == 200) {
                            this.$message.success(result.msg)
                            this.tableRoot.onSearchChange()
                        }
                    })
                })
            },
        },
    }
</script>

<template>
    <Space>
        <el-tooltip class="item" effect="light" content="历史数据" placement="bottom-start">
            <el-button type="text" icon="el-icon-s-order" @click="detailClick" />
        </el-tooltip>
        <el-dropdown @command="handleCommand">
            <el-link class="moreIcon" icon="el-icon-more" :underline="false"></el-link>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="EDIT" icon="el-icon-edit">编辑</el-dropdown-item>
                <el-dropdown-item command="PROPERTY" icon="el-icon-tickets"
                    >属性维护</el-dropdown-item
                >
                <el-dropdown-item
                    command="VIRTUAL"
                    icon="el-icon-setting"
                    v-show="rowData.virtually"
                    >虚拟计量配置</el-dropdown-item
                >
                <el-dropdown-item command="DELETE" icon="el-icon-delete">删除</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </Space>
</template>
<style scoped lang="scss">
    ::v-deep.moreIcon {
        margin-left: 12px;
        color: $primary-color;
    }
</style>
